<template>
  <div class="home">
    父组件的信息
    <img alt="Vue logo" src="../assets/logo.png" />
    <input type="text" v-model="fatherValue" />
    <son-1 :KAGE="fatherValue"></son-1>

    熊掌:<input type="number" v-model="percentage"/>
    <br>
    鱼:<input type="number" v-model="percentageFish"/>

    <speedometer :percentage="percentage" :color="colors"></speedometer>
    <button @click="add">鱼</button>
    <button @click="sub">熊掌</button>
    <!-- <hr /> -->

    <fish :percentage="percentageFish" :color="colors" class="fish"></fish>
  </div>
</template>
<script>
import Fish from "../components/system/fish.vue";
import Son1 from "../components/system/son1.vue";
import Speedometer from "../components/system/speedometer.vue";
export default {
  components: {
    Son1,
    Speedometer,
    Fish,
  },
  data() {
    return {
      fatherValue: "",
      percentage: 50,
      colors: [
        { color: "red", percentage: 20 },
        { color: "yellow", percentage: 40 },
        { color: "blue", percentage: 60 },
        { color: "green", percentage: 80 },
        { color: "red", percentage: 100 },
      ],
      colors: [
        { color: "red", percentage: 20 },
        { color: "yellow", percentage: 40 },
        { color: "blue", percentage: 60 },
        { color: "green", percentage: 80 },
        { color: "red", percentage: 100 },
      ],
    };
  },

  methods: {
    add() {
      this.percentage += 1
      this.percentageFish --
      if (this.percentage > 100 || this.percentageFish > 100) {
        this.percentage = 100
        this.percentageFish = 0
      }
    },
    sub() {
      this.percentage -= 1
      this.percentageFish++;
      if (this.percentage < 0 || this.percentageFish < 0) {
        this.percentage = 0;
        this.percentageFish = 100;
      }
    },
  },
  computed:{
    percentageFish(){
      return 100 - this.percentage
    },
  }
};
</script>
<style>
  .fish{
    width: 300px;
    margin: auto;
  }
</style>